<template>
  <div class="elective_detail">
    <div v-if="$store.state.device !== 'APP'" class="nav_top_list">
      <van-icon name="arrow-left"  class="left_btn" @click="$router.go(-1)"/>
      <van-sticky v-show="showPosition" :offset-top="0" @scroll="serollShow" :z-index="999">
        <div class="position_btn" :style="{opacity: opacityNumber}">
          <a href="javascript:;" :class="scrollTopNumber > 200 && scrollTopNumber <= scrollB ? 'item_btn active' : 'item_btn'" @click="serollWz('a')">专业</a>
          <a href="javascript:;" :class="scrollTopNumber > scrollB && scrollTopNumber <= scrollC ? 'item_btn active' : 'item_btn'" @click="serollWz('b')">评论</a>
          <a href="javascript:;" :class="scrollTopNumber > scrollC ? 'item_btn active' : 'item_btn'" @click="serollWz('c')">详情</a>
        </div>
      </van-sticky>
      <div class="btn_right">
        <a :href="'/elective-choose?school_id=407&center_id=8038&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_28.png" alt=""></a>
        <a :href="'/user-member?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
      </div>
    </div>
    <div id="scrollA" ref="scrollA" class="banner_body">
      <div v-if="cutoverActive === 0 && productList.major.video_file" class="video_swiper_list">
        <swiper :options="swiperVideo" ref="swiperVideo">
          <swiper-slide>
            <video :src="productList.major.video_file" controls="controls" :poster="productList.major.video_cover"></video>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div v-if="cutoverActive === 1 && productList.product_image.length > 0" class="img_swiper_list">
        <swiper :options="swiperImg" ref="swiperImg">
          <swiper-slide v-for="item in productList.product_image" :key="item.product_image_id">
            <div class="block_img"><img :src="item.image_url" alt=""></div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div v-if="productList.major.video_file && productList.product_image.length > 0" class="cutover_btn">
        <span :class="cutoverActive === 0? 'active' : ''" @click="cutoverActive = 0"><i class="iconfont icon-bofang1"></i> 视屏</span>
        <span :class="cutoverActive === 1? 'active' : ''" @click="cutoverActive = 1">图片</span>
      </div>
    </div>
    <!--商品-->
    <div v-if="productList" class="commodity_list">
      <span class="right_span">{{productList.edu_type_id === 1?'学历':'职业'}}</span>
      <h2>{{productList.product_name}}</h2>
      <div class="message_text">
        <p>
          <span>￥</span>
          <strong>{{(productList.product_sku[0].price)}}</strong>
          <span>/{{productList.product_sku[0].fee_items_type_name}}</span>
        </p>
        <p>至毕业总费用：¥ {{productList.product_extent.total_price}} <i style="font-style: normal" v-if="productList.product_extent.description">({{productList.product_extent.description}})</i> </p>
        <div class="span_list">
          <span  v-for="(item, index) in productList.major_tag" :key="item.major_id + '' + index">
            <img v-if="item.icon" :src="item.icon" alt="">
            {{item.tag_name}}
          </span>
        </div>
<!--        <div class="prompt_text">开放教育<i class="iconfont icon-wenhaoyuanyiwenmianxing"></i></div>-->
        <div class="right_text_btn" @click="costShow = true">
          明细 <van-icon name="arrow" />
        </div>
      </div>
      <div class="message_list">
        <div v-if="productList.my_policy" class="item_p">
          <span class="left_text">助学金</span>
          <div class="right_text">
            <p>领券至少可减¥{{productList.my_policy.setting.discount_price}}</p>
            <p><i class="iconfont icon-zhujiao"></i> {{productList.my_policy.policy_name}} <button v-if="couponList.length > 0"  @click="subsidyShow = true" >领取</button></p>
          </div>
        </div>
        <!--<div class="item_p">
          <span class="left_text">补贴</span>
          <div class="right_text">
            <span>2019年补贴最高500元</span>
          </div>
        </div>-->
        <div v-if="productList.major" class="item_p">
          <span class="left_text">条件</span>
          <div class="right_text">
            <p>{{productList.major.condition}}</p>
          </div>
        </div>
        <div v-if="productList.major" class="item_p">
          <span class="left_text">难度</span>
          <div class="right_text">
            <p>{{productList.major.difficulty}}</p>
          </div>
        </div>
        <!--<div class="right_text_btn">
          <van-icon name="arrow" />
        </div>-->
      </div>
    </div>
    <!--详情-->
     <div v-if="productList.proxy_school_info" class="institution_body">
       <h3>院校详情</h3>
       <div class="left_body"   @click="$router.push({ path:'/elective-list', query:{ detail_school_id: productList.proxy_school_info.school_id }})">
         <img :src="productList.proxy_school_info.wap_logo" alt="">
         <p class="school_name">{{productList.proxy_school_info.school_name}}</p>
         <div class="right_text_btn">
           详情 <van-icon name="arrow" />
         </div>
       </div>
     </div>
    <!--评价-->
    <div id="scrollB" ref="scrollB" class="evaluate_body">
      <div>
        <h3>{{commentList.count?'精选评价': '暂无评价'}} <span>({{commentList.count?commentList.count:0}})</span> <span class="right_span">好评度{{commentList.score_avg?commentList.score_avg:100}}%</span></h3>
        <div class="label_list">
          <span class="lable_item">全部({{commentList.count?commentList.count:0}})</span>
          <span class="lable_item">称赞与推荐({{commentList.good?commentList.good:0}})</span>
          <span class="lable_item">问题与反馈({{commentList.bad?commentList.bad:0}})</span>
        </div>
        <div class="student_list">
          <van-list
              v-model="loading"
              :finished="finished"
              @load="onLoad">
            <div v-for="(item, index) in commentList.list" :key="item.name + '' + index" class="stu_item">
              <img :src="item.avatar" alt="">
              <div class="user_body">
                <div class="name">
                  {{item.name}}
                  <em>{{item.create_time}}</em>
                </div>
                <p>{{item.comment}}</p>
              </div>
            </div>
            <div v-if="footerShow" class="no_text_p">没有更多了</div>
          </van-list>
        </div>
      </div>
    </div>
    <!--简介-->
    <div id="scrollC"  ref="scrollC" class="synopsis_body">
      <van-tabs v-if="productList && productList.major"  color="#BB1C21" title-active-color="#BB1C21" line-width="35"  :swipe-threshold="5">
        <van-tab v-for="(item, index) in productList.major.major_detail" :key="item.major_detail_id" :title="item.attr_name" :name="'index'+index">
          <div class="Compile_body_format Compile_body_minHeight" v-html="item.attr_value" @click="openImg($event)">{{item.attr_value}}</div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="footer_body">
      <a href="tel:400-009-9661">
        <img src="../../../assets/img/modules/elective/kc_v4_phone.png" alt="">
        <span>电话</span>
      </a>
      <a href="javascript:;" @click="openAdvisory">
        <img src="../../../assets/img/modules/elective/kc_v4_kf.png" alt="">
        <span>咨询老师</span>
      </a>
      <button @click="openHtmlReg">我已经了解，继续报名</button>
    </div>
    <!--费用-->
    <van-popup
        v-if="productList"
        v-model="costShow"
        position="bottom">
      <van-nav-bar
          title="费用明细"
          left-text="返回"
          left-arrow
          @click-left="costShow = false"
      />
      <div v-for="itemList in productList.product_sku" :key="itemList.fee_items_type_id" class="address_list">
        <div class="nian_name">{{itemList.fee_items_type_name}}</div>
        <div v-for="item_sa in itemList.item" :key="item_sa.product_items_id" class="item_cost">
          <span>{{item_sa.items_name}}</span>
          <span>￥{{item_sa.price}}</span>
        </div>
      </div>
    </van-popup>
    <!--补贴-->
    <van-popup
        v-model="subsidyShow"
        position="bottom">
      <van-nav-bar
          title="助学金"
          left-text="返回"
          left-arrow
          @click-left="subsidyShow = false"/>
      <div v-if="couponList.length > 0" class="subsidy_list">
        <div class="item_tab" v-for="item in couponList" :key="item.policy_id">
          <p class="top_text">助学金</p>
          <div class="left_number">
            <strong><span>￥</span> {{item.setting.discount_price}}</strong>
          </div>
          <div class="right_body">
            <p>{{item.policy_name}}</p>
          </div>
          <button v-if="item.i_get !== 1" @click="getReceive(item.policy_id)">领取</button>
          <button v-else>已领取</button>
          <span class="footer_text">{{item.policy_desc}}</span>
        </div>
      </div>
    </van-popup>
    <!--输入手机号-->
    <van-dialog
        v-model="phoneShow"
        title="填写手机号"
        confirmButtonText="领取"
        @confirm="getCouponTab"
        show-cancel-button>
      <van-cell-group>
        <van-field v-model="phone" type="number" placeholder="请输入手机号" />
      </van-cell-group>
    </van-dialog>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
import cloneDeep from 'lodash/cloneDeep'
import { isMobile } from '@/utils/validate'
import { ImagePreview } from 'vant'
export default {
  name: 'elective_detail',
  components: {},
  data () {
    return {
      showPosition: false,
      phoneShow: false,
      costShow: false,
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      subsidyShow: false,
      commentShow: false,
      footerShow: false,
      cutoverActive: 0,
      opacityNumber: 0,
      commentList: [], // 评论列表
      commentModelList: [], // c评论列表
      couponList: [], // 优惠列表
      scrollA: 0,
      scrollB: 0,
      scrollC: 0,
      productList: {
        major: {
          video_file: ''
        },
        product_extent: {
          product_extent: ''
        },
        product_sku: [{
          end_price: ''
        }],
        my_policy: {
          setting: {
            discount_price: ''
          }
        }
      },
      scrollTopNumber: 0,
      swiperVideo: { // 初始化视屏
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        }
      },
      swiperImg: { // 初始化图片
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        }
      },
      id: 0, // 专业
      phone: '', // 手机号
      center_id: 0, // 学习中心
      policy_id: 0, // 政策中心
      current: 1, // 当前页
      size: 5 // 每页条数
    }
  },
  props: {},
  watch: {
    phone: function (newValue, oldValue) {
      this.phone = newValue.replace(/[^\d]/g, '')
      this.phone = newValue.substring(0, 11)
    }
  },
  methods: {
    /* wf_Huang 2019/9/19 0019 图片预览 */
    openImg (event) {
      if (event.target.nodeName === 'IMG') {
        for (let i = 0; i < event.currentTarget.getElementsByTagName('img').length; i++) {
          if (event.currentTarget.getElementsByTagName('img')[i] === event.target) {
            ImagePreview({
              images: this.productList.imgList,
              startPosition: i,
              onClose () {
                // do something
              }
            })
          }
        }
      }
    },
    /* wf_Huang 2019/8/29 0029 跳页面 这里产品要求特殊处理明航的报读页面  不知道是怎么想的 哎 */
    openHtmlReg () {
      if (this.$store.state.gsign === 'mhzg') {
        window.location.href = `http://caac.qy.oucnet.com/index.php?c=caacnew&m=m1material&product_id=${this.productList.product_id}`
      } else {
        this.$router.push({ path: 'elective-register', query: { product_name: this.productList.product_name, product_id: this.productList.product_id, description: this.productList.major_type.description || '', end_price: this.productList.product_sku[0].price } })
      }
    },
    /* wf_Huang 2019/8/28 0028 咨询老师 */
    openAdvisory () {
      if (this.$store.state.gsign === 'qy') {
        window.location.href = 'https://webchat.7moor.com/wapchat.html?accessId=023462d0-8040-11e8-9c33-012cab216043&fromUrl=选学&urlTitle=企业职工学院APP'
      } else {
        window.location.href = 'https://webchat.7moor.com/wapchat.html?accessId=023462d0-8040-11e8-9c33-012cab216043&fromUrl=选学&urlTitle=广州实验学院APP'
      }
    },
    /*
       *@author wf_Huang
       *@Time 2019/8/16 0016 15:17
       *@function  切换简介
       *****************************************/
    openTab (val) {
      console.log(val)
    },
    /*
       *@author wf_Huang
       *@Time 2019/8/16 0016 16:39
       *@function  滚动显示导航
       *****************************************/
    serollShow (data) {
      this.scrollTopNumber = data.scrollTop
      this.scrollA = cloneDeep(document.getElementById('scrollA').offsetTop - 110)
      this.scrollB = cloneDeep(document.getElementById('scrollB').offsetTop - 110)
      this.scrollC = cloneDeep(document.getElementById('scrollC').offsetTop - 110)
      if (data.scrollTop > 100) {
        this.showPosition = true
        if (data.scrollTop < 200) {
          this.opacityNumber = (data.scrollTop - 100) / 100
        } else {
          this.opacityNumber = 1
        }
      } else {
        this.showPosition = false
      }
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/16 0016 18:32
     *@function  滚动式对应位置
     *****************************************/
    serollWz (val) {
      if (val === 'a') {
        this.$refs.scrollA.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
      }
      if (val === 'b') {
        this.$refs.scrollB.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
      }
      if (val === 'c') {
        this.$refs.scrollC.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
      }
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/17 0017 11:15
     *@function  获取评论
     *****************************************/
    getComment () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.product/getCommentProduct?goodId=${this.$store.state.elective.id}&page=${this.current}&size=${this.size}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast('评论查询失败~')
          return false
        }
        if (res.data) {
          if (this.current > 1) {
            res.data.list.forEach(item => {
              this.commentList.list.push(item)
            })
          } else {
            this.commentList = []
            this.commentList = res.data
          }
          if (res.data.list.length < this.size) {
            this.finished = true
            this.footerShow = true
          } else {
            this.footerShow = false
          }
        } else {
          this.finished = true
          this.footerShow = true
        }
        this.loading = false
        this.current = this.current + 1
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 18:00
     *@function  上拉刷新 加载
     *****************************************/
    onLoad: debounce(function () {
      this.getComment()
    }, 1000, { 'leading': true, 'trailing': false }),
    /*
     *@author wf_Huang
     *@Time 2019/8/17 0017 16:37
     *@function  获取专业详情
     *****************************************/
    getSpecialtyDetail () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/getProductDetail.html?product_id=${this.$store.state.elective.id}&learn_center_id=${this.$store.state.elective.center_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('专业详情失败~')
          return false
        }
        this.productList = res.data
        if (this.productList.major.video_file) {
          this.cutoverActive = 0
        } else {
          this.cutoverActive = 1
        }
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/18 0018 15:11
     *@function  获取优惠券
     *****************************************/
    getCouponList () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/getPolicy.html?product_id=${this.$store.state.elective.id}&learn_center_id=${this.$store.state.elective.center_id}&phone=${this.$store.state.elective.phone}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          // this.$toast(res.msg)
          return false
        }
        this.couponList = res.data || []
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/18 0018 15:36
     *@function  领取
     *****************************************/
    getReceive (id) {
      this.policy_id = id
      if (!this.$store.state.elective.phone || this.phone !== this.$store.state.elective.phone) {
        this.phoneShow = true
      } else {
        this.getCouponTab()
      }
    },
    // 领取
    getCouponTab () {
      if (!isMobile(this.phone)) {
        this.$toast('手机号格式有误')
        return false
      }
      if (!this.$store.state.elective.phone && this.phone !== this.$store.state.elective.phone) {
        this.$store.state.elective.phone = this.phone
        localStorage.setItem('stateData', JSON.stringify(this.$store.state))
      }
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/bindingPhonePolicy.html?policy_id=${this.policy_id}&phone=${this.$store.state.elective.phone}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('领取失败~')
          this.$store.state.elective.phone = ''
          this.phone = ''
          localStorage.setItem('stateData', JSON.stringify(this.$store.state))
          return false
        }
        this.$toast('领取成功')
        this.getCouponList()
      }).catch(() => {})
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F6F6F6')
    if (this.$route.query.id) {
      this.$store.state.elective.id = this.$route.query.id
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
    if (this.$route.query.center_id) {
      this.$store.state.elective.center_id = this.$route.query.center_id
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
    this.getSpecialtyDetail()
    this.getCouponList()
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
    window.removeEventListener('scroll', this.serollShow)
  }
}
</script>
<style lang="scss" scoped>
  .elective_detail {
    .Compile_body_minHeight{
      overflow: auto;
      min-height: 1400px;
      padding: 30px;
    }
    .nav_top_list{
      z-index: 8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: #ffffff;
      border-bottom: 1px solid #efefef;
      .left_btn{
        color: #999999;
        font-size: 32px;
        margin-right: 130px;
      }
      span{
        font-size: 32px;
        color: #181818;
        font-weight: bold;
      }
      .btn_right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;
          img{
            width: 36px;
            height: 34px;
          }
          .active{
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }
    .banner_body{
      width:750px;
      height:400px;
      position: relative;
      margin: 100px auto 0;
      .video_swiper_list,.img_swiper_list{
        video{
          width:750px;
          height:400px;
        }
        .block_img{
          width:750px;
          height:400px;
          overflow: hidden;
          img{
            width: 750px;
            height: auto;
            object-fit: fill;
          }
        }
        .swiper-pagination{
          position: absolute;
          color: #ffffff;
          left: 80%;
          bottom: 75px;
          width:77px;
          height:50px;
          line-height: 50px;
          background:rgba(0,0,0,1);
          opacity:0.5;
          border-radius:25px;
          font-size:22px;
        }
      }
      .cutover_btn{
        position: absolute;
        bottom: 30px;
        left: 50%;
        z-index: 6;
        transform: translate(-50%, -50%);
        display: flex;
        width:200px;
        height:50px;
        background:rgba(255,255,255,1);
        border-radius:60px;
        padding: 0px 5px;
        justify-content: center;
        align-items: center;
        span{
          width:90px;
          height:40px;
          color: rgba(196,21,17,1);
          font-size:22px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .active{
          width:110px;
          height:40px;
          background:rgba(196,21,17,1);
          border-radius:20px;
          color: #ffffff;
          i{
            font-size: 28px;
          }
        }
      }
    }
    .commodity_list{
      width:750px;
      margin:  0 auto 20px;
      padding: 50px 40px;
      position: relative;
      background-color: #ffffff;
      .right_span{
        padding: 2px 20px;
        background:rgba(196,21,17,1);
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        font-size:22px;
        position: absolute;
        top: 50px;
        right: 0;
        color: #ffffff;
        line-height: 34px;
        text-align: center;
      }
      h2{
        font-size:40px;
        /*overflow: hidden;*/
        /*text-overflow: ellipsis;*/
        /*white-space: nowrap;*/
        width: 80%;
        margin: 0 0 15px 0;
      }
      .message_text{
        position: relative;
        padding-bottom: 20px;
        border-bottom: 1px solid #efefef;
        p{
          font-size:24px;
          color: #8D8D8D;
          margin: 15px 0;
          span{
            color: #C41511;
            margin-right: 10px;
          }
          strong {
            color: #C41511;
            font-size: 42px;
          }
          em{
            position:relative;
            font-style: normal;
            margin-left: 10px;
            &:before{
              content:"";
              position:absolute;
              left:50%;
              top:50%;
              width:65%;
              box-sizing:border-box;
              border-bottom:1px solid #bbbbbb;
              transform-origin:bottom center;
              transform: rotateZ(4deg) translate(-50%, -50%) scale(1.414);
              animation:slash 5s infinite ease;
            }
          }
        }
        .span_list{
          display: flex;
          flex-wrap: wrap;
          span{
            font-size:24px;
            color: #000000;
            margin-right: 30px;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f2f3f5;
            i{
              color: #FF9424;
              font-size: 24px;
            }
            img{
              width: 20px;
              height: 20px;
            }
          }
        }
        .prompt_text{
          font-size: 24px;
          color: #000000;
          line-height: 60px;
          display: flex;
          align-items: center;
          i{
            font-size: 28px;
            margin-left: 10px;
          }
        }
        .right_text_btn{
          position: absolute;
          right: 0;
          top: 26%;
          line-height: 80px;
          font-size: 24px;
          color: #8D8D8D;
          transform: translate(0, -50%);
          display: flex;
          align-items: center;
          i{
            color: #FF9424;
            font-size: 30px;
            margin-left: 10px;
          }
        }
      }
      .message_list{
        position: relative;
        padding: 40px 0;
        .item_p{
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 38px;
          .left_text{
            width: 120px;
            font-size: 24px;
            color: #000000;
            padding: 10px 0;
            font-weight: bold;
          }
          .right_text{
            font-size:24px;
            color: #000000;
            width: calc(100% - 120px);
            span{
              font-size:24px;
              background:rgba(255,244,244,1);
              line-height: 48px;
              color: #C41511;
              padding: 5px 15px;
            }
            p{
              display: flex;
              align-items: center;
              margin: 10px 0;
              position: relative;
              i{
                color: #FF9424;
                font-size: 32px;
                margin-right: 10px;
              }
              button{
                width: 95px;
                height:50px;
                display: block;
                background:rgba(196,21,17,1);
                border-radius:25px;
                font-size:24px;
                color: #ffffff;
                border: 0;
                position: absolute;
                right: 0;
              }
            }
          }
        }
        .right_text_btn{
          position: absolute;
          right: 0;
          top: 48%;
          line-height: 80px;
          font-size: 24px;
          color: #8D8D8D;
          transform: translate(0, -50%);
          display: flex;
          align-items: center;
          i{
            color: #FF9424;
            font-size: 30px;
            margin-left: 10px;
          }
        }
      }
    }
    .institution_body{
      padding: 40px;
      margin-bottom: 20px;
      background-color: #ffffff;
      position: relative;
      .left_body{
        display: flex;
        align-items: center;
        justify-content: space-between;
        img{
          width: 90px;
          height: 90px;
          border-radius: 90px;
          border: 2px solid #efefef;
        }
        .school_name{
          font-size: 30px;
          color: #333333;
          margin-left: 25px;
          width: 450px;
          line-height: 40px;
        }
        .right_text_btn{
          line-height: 80px;
          font-size: 24px;
          color: #8D8D8D;
          display: flex;
          align-items: center;
          i{
            color: #FF9424;
            font-size: 30px;
            margin-left: 10px;
          }
        }
      }
      h3{
        font-size:34px;
        margin: 0 0 20px;
        color: #000000;
        font-weight: bold;
        line-height: 50px;
      }
      P{
        margin: 15px 0;
      }
      .p_1{
        font-size:30px;
        color: #333333;
      }
      .p_2{
        font-size:24px;
        color: #333333;
      }
      .p_3{
        font-size:24px;
        color: #8D8D8D;
      }
    }
    .evaluate_body{
      padding: 40px;
      background-color: #ffffff;
      position: relative;
      h3{
        font-size:34px;
        margin: 0 0 20px;
        color: #000000;
        font-weight: bold;
        line-height: 50px;
        span{
          font-weight: normal;
          font-size: 30px;
          color: #999999;
        }
        .right_span{
          font-weight: normal;
          font-size: 24px;
          color: #999999;
          float: right;
        }
      }
      .label_list{
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid #efefef;
        .lable_item{
          background:rgba(255,244,244,1);
          border-radius:20px;
          font-size: 24px;
          color: #BB1C21;
          margin-right: 20px;
          padding: 10px 25px;
        }
      }
      .student_list{
        .stu_item{
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #efefef;
          margin-bottom: 30px;
          &:last-child{
            border: 0;
          }
          img{
            width:80px;
            height:80px;
            min-width: 80px;
            border-radius:40px;
            display: block;
          }
          .user_body{
            width: calc(100% - 120px);
            .name{
              font-size:28px;
              color: #333333;
              line-height: 60px;
              span{
                padding: 0 15px;
                background-color: #FF9424;
                font-size: 24px;
                color: #ffffff;
                border-radius: 50px;
              }
              .error{
                background-color: #C41511;
              }
              em{
                float: right;
                color: #999999;
                font-size: 24px;
                font-style: normal;
              }
            }
            .specialty_span{
              font-size: 24px;
              color: #8D8D8D;
            }
            p{
              font-size:26px;
              color: #333333;
            }
          }
        }
      }
    }
    .synopsis_body{
      background-color: #ffffff;
      position: relative;
      margin-bottom: 120px;
      .tab_list_detail{
        .title_text{
          height: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #333333;
          margin: 50px 150px;
          .title_name{
            display: inline-block;
            font-size:30px;
            color: #333333;
            padding: 5px 20px;
            background-color: #ffffff;
          }
        }
        .item_tab{
          border-bottom: 20px solid #f6f6f6;
        }
        .Compile_body_format{
          padding: 40px;
        }
      }
    }
    .footer_body{
      height:99px;
      z-index: 99;
      background-color: #ffffff;
      box-shadow:0px -3px 18px 0px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      a{
        flex: 0.2;
        text-align: center;
        img{
          width: 50px;
          height: 50px;
          display: block;
          margin: 0 auto;
        }
        span{
          font-size: 24px;
          color: #C41511;
          display: block;
        }
      }
      button{
        flex: 0.6;
        background-color: #C41511;
        font-size:26px;
        color: #ffffff;
        border: 0;
        display: block;
        height: 100%;
      }
    }
    .position_btn{
      display: flex;
      background-color: #ffffff;
      position: absolute;
      left: 50%;
      right: 50%;
      width: 350px;
      transform: translate(-50%, -50%);
      a{
        flex: 1;
        text-align: center;
        font-size: 26px;
        line-height: 50px;
        padding: 0 20px;
        color: #999999;
      }
      .active{
        color: #333333;
        position: relative;
        &:after{
          content: '';
          position: absolute;
          width: 45px;
          height: 4px;
          background-color: #bb1c21;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .address_list{
      height: calc(100% - 100px);
      overflow: auto;
      padding: 30px 0 0 30px;
      .nian_name{
        font-size: 26px;
        color: #999999;
      }
      .item_cost{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        border-bottom: 1px solid #efefef;
        padding-right: 30px;
        &:last-child{
          border: 0;
        }
        span{
          font-size: 26px;
          color: #333333;
          &:last-child{
            color: #999999;
          }
        }
      }
    }
    .subsidy_list{
      padding: 41px;
      background-color: #f2f3f5;
      height: 650px;
      overflow: auto;
      .item_tab{
        width: 667px;
        height: 210px;
        background: url("../../../assets/img/modules/elective/icon_01.png");
        background-size: 100%;
        position: relative;
        padding: 40px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-radius: 10px;
        margin-bottom: 30px;
        .left_number{
          width: 220px;
          text-align: center;
          strong{
            font-size: 50px;
            color: #ffffff;
            display: block;
            span{
              font-size: 24px;
            }
          }
          p{
            font-size: 24px;
            color: #ffffff;
            margin: 10px 0;
          }
        }
        .right_body{
          position: relative;
          width: 350px;
          padding-left: 25px;
          border-left: 1px dashed #ffffff;
          p{
            font-size:30px;
            color: #ffffff;
            line-height: 45px;
            margin: 0 0 15px 0;
          }
          span{
            font-size:22px;
            color: #ffffff;
            display: flex;
          }
        }
        button{
          position: absolute;
          bottom:30px;
          right: 30px;
          width:120px;
          height:60px;
          background: #ffffff;
          border-radius:30px;
          font-size:24px;
          color: #C41511;
          border: 0;
        }
        .top_text{
          position: absolute;
          left:0;
          top: 0;
          background-color: #ff9424;
          padding: 5px 15px;
          font-size:26px;
          color: #ffffff;
          margin: 0;
        }
        .footer_text{
          font-size:24px;
          color: #ffffff;
          display: flex;
        }
      }
    }
    .no_text_p{
      padding: 30px 40px;
      font-size: 24px;
      color: #efefef;
      text-align: center;
    }
  }
</style>
